import Vue from "vue";
import VueRouter from "vue-router";
import discover from "@/pages/discover";
// import mine from "@/pages/mine";
import friend from "@/pages/friend";

//将VueRouter路由注入到Vue所有子组件
Vue.use(VueRouter);

//设置路由routes

//配置路由三个步骤
// 1.创建页面组件
// 2.配置routes    一个数组，数组中每个对象基本属性一个path对应一个component
// 3.将router-view路由视图组件放到正确的位置

//路由懒加载（按需加载），主要通过import（）这种语法，vue-cli是基于webpack，webpack在编译的时候，遇到了import（）这种语法，就会自动的将代码进行分割，split-code，实现懒加载的核心就是使用webpack的分割功能

//懒加载的好处：提高首屏的加载速度，提升用户体验，节省流量

//动态路由：就是通过切换路径，来达到传参的目的

let routes = [
  {
    path: "/discover",
    component: discover,
    children: [
      {
        //children中选项的path最前面不能加“/”
        path: "playlist",
        component: () => import("@/pages/discover/playlist"),
      },
      {
        //children中选项的path最前面不能加“/”
        path: "djradio",
        component: () => import("@/pages/discover/djradio"),
      },
    ],
  },
  {
    path: "/friend/:py",
    component: friend,
  },
  {
    path: "/mine",
    component: () => import(/*webpackChunkName:'mine'*/ "@/pages/mine"),
    // 具名路由   好处是可以直接用名字跳转
    name: "mine",
  },
  {
    path: "/list",
    component: () => import("@/pages/list"),
  },
  {
    path: "/detail/:productid",
    component: () => import("@/pages/detail"),
  },
  {
    path: "*",
    component: () => import("@/pages/page404"),
  },
];
//实例化Vue路由
let router = new VueRouter({
  routes,
});

export default router;
